<template>
    <div id="select">
      <div class="main">
        <div class="seat">
          <div class="seat_wrap">
            <div class="seat_left">
              <!-- 座位分布 -->
              <div id="seatMap">
                <div class="seat-charts-row" v-for="(seats,x) in seatList.seatArray">
                  <div ref="allSeat" class="allPublicGray" v-for="(seat,y) in getItems(seats)">
                    <!-- {{seatInfoList[(x*seats.length)+y]}} -->
                    <div class="seat-charts-item" v-if="seatInfoList[(x*seats.length)+y]&&seatInfoList[(x*seats.length)+y].areaLevel!='@'">
                      <Tooltip style="position:relative;">
                        <div v-if="seatInfoList[(x*seats.length)+y].status!=1">
                          <img v-if="seatInfoList[(x*seats.length)+y].status==0" src="/static/img/sofa-locked.png"/>
                          <img v-if="seatInfoList[(x*seats.length)+y].status==2" src="/static/img/sofa-selected.png"/>
                          <img v-if="seatInfoList[(x*seats.length)+y].status==3" src="/static/img/sofa-gray.png"/>
                        </div>
                        <div v-else>
                          <img :src="areaLevelImg[seatInfoList[(x*seats.length)+y].areaLevel]" @click="addSeat(seatInfoList[(x*seats.length)+y])" v-if="areaLevelImg[seatInfoList[(x*seats.length)+y].areaLevel]&&seatPrice.indexOf(seatInfoList[(x*seats.length)+y].areaLevel.toLocaleUpperCase())==-1&&!seatData.get((seatInfoList[(x*seats.length)+y].x)+'_'+(seatInfoList[(x*seats.length)+y].y))"/>
                          <img :src="areaLevelImgShadow[seatInfoList[(x*seats.length)+y].areaLevel]" style="background-image: url(/static/img/sofa-shadow-bottom.png);background-size: 100%;" @click="addSeat(seatInfoList[(x*seats.length)+y])" v-if="seatPrice.indexOf(seatInfoList[(x*seats.length)+y].areaLevel.toLocaleUpperCase())!=-1&&!seatData.get((seatInfoList[(x*seats.length)+y].x)+'_'+(seatInfoList[(x*seats.length)+y].y))"/>
                          <img src="/static/img/sofa-selected.png" @click="delSeat(seatInfoList[(x*seats.length)+y])" v-if="seatData.get((seatInfoList[(x*seats.length)+y].x)+'_'+(seatInfoList[(x*seats.length)+y].y))"/>
                        </div>
                        <template #content>
                            <p>座位：{{seatInfoList[(x*seats.length)+y].x}}排{{seatInfoList[(x*seats.length)+y].y}}号</p>
                            <p>楼层：剧场</p>
                            <p>看台：{{seatInfoList[(x*seats.length)+y].cinemaName}}</p>
                            <p>等级：{{seatInfoList[(x*seats.length)+y].areaLevel}}区</p>
                            <p>票价：{{seatInfoList[(x*seats.length)+y].price}} 元</p>
                            <p>状态：{{seatInfoList[(x*seats.length)+y].status==1?'可售':'不可售'}}</p>
                        </template>
                      </Tooltip>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 三等级凸显 -->
              <div class="seatStatus">
                <ul>
                  <li v-for="(item, index) in seatPriceList" :key="index">
                    <span :style="`background-color:${areaLevelColor[item.areaLevelName]};`">{{item.price}}</span>
                    <span>{{item.areaLevelName}}</span>
                    <input type="checkbox" v-model="seatPrice" :value="item.areaLevelName" name="seatPrice"/>
                  </li>
                </ul>
                <ul class="list-inline">
                  <li class="list-inline-item"><img src="/static/img/sofa-locked.png" width="25" alt=""> 禁选</li>
                  <li class="list-inline-item"><img src="/static/img/sofa-selected.png" width="25" alt=""> 已选</li>
                  <li class="list-inline-item"><img src="/static/img/sofa-gray.png" width="25" alt=""> 已售</li>
                </ul>
              </div>
            </div>
            <div class="seat_right" v-if="seatData.size">
              <h3>已选座位[<span class="px-1">{{seatData.size}}</span>]</h3>
                <ul style="height:500px;overflow:auto;">
                  <li v-for="s of seatData.keys()">
                    <div v-if="seatData.get(s)">
                      <img :src="areaLevelImg[seatData.get(s).areaLevel]" alt="">
                    </div>
                    <div class="position-relative">
                      <p>座位：{{seatData.get(s).x}}排{{seatData.get(s).y}}号</p>
                      <p>价格：{{seatData.get(s).price}}元</p>
                      <p>看台：{{seatData.get(s).cinemaName}}</p>
                      <p>楼层：剧场</p>
                    </div>
                  </li>
                </ul>
              <h1><Button type="primary" @click="$emit('checkOut')">结账：{{totalPrice}}元</Button></h1>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import router from "../../../router"
export default{
  props:{
    seatPriceList:null,
    seatInfoList:null,
    seatList:null,  
    seatData:null
  },
  emits:['checkOut',"addSeatData","deleteSeatData"],
  data(){
    return {
      seatPrice:[],
      areaLevelImg:{
        A:"/static/img/sofa-red.png",
        B:"/static/img/sofa-blue.png",
        C:"/static/img/sofa-pink.png"},
      areaLevelImgShadow:{
        A:"/static/img/sofa-red-shadow.png",
        B:"/static/img/sofa-blue-shadow.png",
        C:"/static/img/sofa-pink-shadow.png"},
      areaLevelColor:{
        A:"#fd6566",
        B:"#fd68a6",
        C:"#65a9fd"},
    }
  },
  computed:{
    totalPrice(){
      let totalPrice = 0;
      for(var e of this.seatData.keys()){
        totalPrice+=this.seatData.get(e).price;
      }
      return totalPrice;
    }
  },
  watch:{
    seatPriceList:{
      handler(n){
        this.$router.load 
        let price = this.$route.query.price;
        //监听数据变化后获取路由数据，根据路由参数价格信息查找并添加到数组中
        if(!isNaN(Number.parseInt(price))&&this.seatPriceList){
          price=Number.parseInt(price);
          let areaLevel = this.seatPriceList.find(e=>e.price==price);
          if(areaLevel){
            this.seatPrice.push(areaLevel.areaLevelName);
          }
        }
      },
      deep:true
    }
  },
  mounted(){
    this.bindScroll();
  },
  methods:{
    addSeat(seat){
      this.$emit("addSeatData",seat);
    },
    delSeat(seat){
      this.$emit("deleteSeatData",seat);
    },
    bindScroll() {
      //  添加鼠标点下和移动事件，通过这两个事件进行监听，通过修改position的top和left值进行界面的移动。
      var oImg = document.querySelector("#seatMap");
      oImg.onmousedown = function(ev) {
        var ev = ev || event;
        var disX = ev.clientX - oImg.offsetLeft;
        var disY = ev.clientY - oImg.offsetTop;
        if (oImg.setCapture) {
          oImg.setCapture();
        }
        document.onmousemove = function(ev) {
          var ev = ev || event;
          oImg.style.left = ev.clientX - disX + "px";
          oImg.style.top = ev.clientY - disY + "px";
        };
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null;
          //释放全局捕获 releaseCapture();
          if (oImg.releaseCapture) {
            oImg.releaseCapture();
          }
        };
        return false;
      };
      // 监听滚轮滚动事件，并使用scale 对页面进行操作，实现界面的放大和缩小。
      oImg.onmousewheel = fn;
      if (oImg.addEventListener) {
        oImg.addEventListener("DOMMouseScroll", fn, false);
      }
      var scaleSize = 1;
      function fn(ev) {
        var ev = ev || event;
        var b = true;
        if (ev.wheelDelta) {    //ev.wheelDelta和ev.detail做兼容
          b = ev.wheelDelta > 0 ? true : false;
        } else {
          b = ev.detail < 0 ? true : false;
        }
        if (b) {
          scaleSize += 0.03;
          scaleSize = scaleSize > 2 ? 2 : scaleSize;
        } else {
          scaleSize -= 0.03;
          scaleSize = scaleSize < 0.5 ? 0.5 : scaleSize;
        }
        this.style.transform = "scale(" + scaleSize + ")";
        if (ev.preventDefault) {
          ev.preventDefault();
        }
        return false;
      }
    },
    getItems (item) {  //封装的将字符串转成一个数组的方法，遍历数组中每一个元素
      return item.match(/[a-z_]{1}(\[[0-9a-z_]{0,}(,[0-9a-z_ ]+)?\])?/gi);
    }
  }
}

</script>

<style scoped lang="less">
#select{
  background: #f5f5f5 ;
  .main{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    .brandNav{
      margin-bottom: 40px;
      .el-breadcrumb{
        margin-left: 15px;
      }
    }
    .seat{
      background: #fff;
      margin-bottom: 20px;
      &>img{
        width: 1202px;
      }
      .seat_wrap{
        display: flex;
        justify-content: space-between;
        .seat_left{
          width: 1000px;
          height: 674px;
          background: #fff;
          position: relative;
          overflow: hidden;
          #seatMap{
            width: 800px;
            height: 574px;
            position: absolute;
            left: 100px;
            top: 50px;
            .seat-charts-row{
              margin-bottom: 32px;
            }
            .allPublicGray{
              width: 18px;
              height: 18px;
              display: inline-block;
              margin-right: 7px;
              text-align: center;
              line-height: 18px;
              .seat-charts-item{
                img{
                  width:18px;
                  height: 18px;
                  display: inline-block;
                  padding: 1px;
                }
              }
            }
            .seat-charts-item:hover{
               box-shadow: #999999  0px 1px 2px, #999999  0px 0px 0px 2px;
            }
            .bgBlack{
              background: url("../assets/img/black.png") no-repeat;
              background-size: 18px;
            }
          }
          .seatStatus {
            position: absolute;
            border: 1px solid #ccc;
            width: 180px;
            height: 200px;
            left: 10px;
            bottom: 10px;
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            &>img{
              margin-left: 20px;
            }
            ul{
              font-size: 12px;
              li{
                margin-bottom: 10px;
                padding: 0 5px;
                span:first-of-type{
                  display: inline-block;
                  width: 56px;
                  text-align: center;
                  border-radius: 3px;
                }
                span:last-of-type{
                  font-weight: bold;
                  padding-left: 10px;
                }
                input{
                  margin-left: 10px;
                }
              }
              li:nth-of-type(2){
                span:first-of-type{
                  border-radius: 3px;
                }
              }
              li:nth-of-type(3){
                span:first-of-type{
                  border-radius: 3px;
                }
              }
            }
            ul:first-child{
              border-bottom: 1px solid #ccc;
              margin-bottom: 10px;
            }
          }
        }
        .seat_right{
          width: 200px;
          height: 674px;
          background: #efefef;
          overflow:auto ;
          h3{
            background: #eee;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            text-align: center;
            font-weight: normal;
            margin-bottom: 10px;
            background:#dddddd;
          }
          h1{
            text-align: center;
            a{
              display: block;
              width: 100px;
              height: 32px;
              text-align: center;
              line-height: 32px;
              margin: 0 auto;
              font-size: 14px;
              color: #fff;
              background: red;
            }
          }
          ul{
            font-size: 14px;
            li{
              border-bottom: 1px solid #ccc;
              margin-bottom: 10px;
              padding-left: 10px;
              div{
                display: inline-block;
                vertical-align:middle;
                padding: 2px;
                img~p{
                  text-align: center;
                }
                p{
                  font-size: 12px;
                  margin-top: 2px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>